/** { "style":{ "navigationStyle": "custom", "navigationBarTextStyle": "white" }, tabBar:{ index:0, "iconPath":
"/static/common/tabBar/a.png", "selectedIconPath": "/static/common/tabBar/a1.png", "text": "首页" } } */
<template>
	<view class="pb30">
		<!-- <image class="bg-1" src="__DIR__/index/img/1.png" mode=""></image> -->
		<view class="bg-1 absolute z-index1"></view>
		<view class="con relative z-index2">
			<view class="bar" :style="{ height: statusBar + 'px' }"></view>

			<view class="plr24 flex-tbc" :style="{ height: customBar - statusBar + 'px' }">
				<view class="flex-tbc" :style="{ height: customBar - statusBar + 'px' }" @click="onShowReg">
					<image class="wh40 mr4" src="__ROOT__/common/images/place-icon.png" mode=""></image>

					<view class="address mr8">
						{{city}}
					</view>
					<image class="w12 h8" src="__ROOT__/common/images/select-icon.png" mode=""></image>
				</view>
			</view>

			<view class="input-box-base">
				<search-view v-model="keyWord" background="#fff" @search="search" />
			</view>

			<view class="card-base-box relative" v-if="charInfo && charInfo.id">
				<image class="relative z-index1" src="__ROOT__/common/images/card-bg.png" mode=""></image>
				<view class="card-cont absolute z-index2 top0 left0">
					<view class="wz">
						违章{{charInfo.num}}
					</view>

					<view class="card-top flex-tbc">
						<view>
							<view class="chepai flex-tbc">
								{{charInfo.code}}<text v-if="charInfo.type"
									:class="[charInfo.type.type == 2? 'text1':'text2']">{{charInfo.type.type == 2? '蓝':'绿'}}</text>
							</view>
							<view class="che-leix text-ellipsis-2" v-if="charInfo.type">
								{{charInfo.pin}}·{{charInfo.type.name || ''}}
							</view>
						</view>

						<view class="jiashi-image">
							<image class="ww100 hh100" :src="getImage(charInfo.images)" mode="aspectFill"
								@click="onPreviewImage(charInfo.images)">
							</image>
						</view>
					</view>

					<view class="info flex-tbc mt12">
						<view class="info1">
							年检时间 <text class="ml10">{{getDate(charInfo.y_day)}}</text>
						</view>

						<view class="info1 ml34">
							保险到期 <text class="ml10">{{getDate(charInfo.b_day)}}</text>
						</view>
					</view>

					<view class="card-bottom flex-lr-tbc mt25">
						<view class="info1">
							所有人 <text class="ml14">{{charInfo.name}}</text>
						</view>

						<view class="more flex-tbc" @click="jumpAll">
							查看全部 <image class="w11 h19 ml10" src="__ROOT__/common/images/row-r.png" mode=""></image>
						</view>
					</view>

				</view>
			</view>
				<!-- v-if="isShowBaoxian" -->
			<view :class="[charInfo.id? '':'mt30', 'box1', 'flex-lr-tbc']"  v-if="isShowBaoxian">
				<view class="w344 h148 relative">
					<image class="w344 h148" src="__ROOT__/common/images/che-2.png" mode=""></image>
				
					<button open-type="contact" class="btn-c"></button>
				</view>
				<!-- <image class="w344 h148" src="__ROOT__/common/images/che-2.png" mode="" @click="jumpBz"></image> -->
				<view class="w344 h148 relative">
					<image class="w344 h148" src="__ROOT__/common/images/che-1.png" mode=""></image>

					<button open-type="contact" class="btn-c"></button>
				</view>
			</view>
			
			<!-- <view :class="[charInfo.id? '':'mt30', 'box1', 'flex-lr-tbc']" >
				<image class="w202 h148" src="__ROOT__/common/images/i1.png" mode="" @click="jumpBz"></image>
				<view class="w484 h148 relative">
					<image class="w484 h148" src="__ROOT__/common/images/i2.png" mode=""></image>
			
					<button open-type="contact" class="btn-c"></button>
				</view>
			</view> -->

			<view class="box2">
				<view class="box-top flex-lr-tbc">
					<view class="title-bar">
						<text>附近门店</text>
					</view>

					<view class="more flex-tbc" @click="jumpMD">
						全部 <image class="w11 h19 ml10" src="__ROOT__/common/images/row-r1.png" mode=""></image>
					</view>
				</view>

				<view class="list" v-if="list && list.length>0">
					<!-- <item1 /> -->

					<view class="item" v-for="item in list" :key="item.id">
						<view class="item-top display_flex" @click="jumpDetail(item)">
							<view class="image flex-shrink">
								<image class="ww100 hh100" :src="getImage(item.images)" mode="aspectFill">
								</image>
							</view>

							<view class="item-info flex_1">
								<view class="title flex-tbc">
									<view class="name text-ellipsis-1">
										{{item.name}}
									</view> <text class="flex-shrink">验车</text>
								</view>

								<view class="info-1 mt30 flex-tbc">
									<image class="w28 h28" src="__ROOT__/common/images/time-1.png" mode=""></image>
									<view class="text text-ellipsis-1">
										{{item.w_name}} {{item.wzsj}}
									</view>
								</view>

								<view class="info-1 mt12 flex-tbc">
									<image class="w28 h28" src="__ROOT__/common/images/place-1.png" mode=""></image>
									<view class="text text-ellipsis-1">
										{{item.address}}
									</view>
								</view>
							</view>
						</view>

						<view class="item-bottom display_flex">
							<view class="bott-box flex_1 flex-all-c br" @click="onDaohang(item)">
								<image class="w36 h36 mr12" src="__ROOT__/common/images/place-2.png" mode=""></image>
								地址导航
								<image class="w11 h18 ml12" src="__ROOT__/common/images/row-r2.png" mode=""></image>
							</view>

							<view class="bott-box flex_1 flex-all-c" @click="onPhone(item)">
								<image class="w36 h36 mr12" src="__ROOT__/common/images/phone1.png" mode=""></image>
								拨打电话
								<image class="w11 h18 ml12" src="__ROOT__/common/images/row-r2.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>

				<view class="list" v-else>
					<view class="hint-base">
						暂无数据
					</view>
				</view>
			</view>


		</view>

		<ssq-picker v-model="cityArray" :level="2" ref="ssqRef" @change="changessq" />
		
		<tabbar name="/pages/index/index" :fixed='true' :isShowBaoxian="isShowBaoxian"  />
	</view>
</template>

<script setup>
	import searchView from '@/components/searchView.vue';
	import item1 from '@/components/item1.vue'
	import timeFormat from '@/utils/timeFormat.js'
	import tabbar from '@/components/tabbar.vue'
	import {
		getlocationBase
	} from '@/utils/global.js'
	import {
		ref,
		onMounted
	} from 'vue';

	const isiPhone = ref('');
	const statusBar = ref('');
	const customBar = ref('');
	const longitude = ref('');
	const latitude = ref('');
	const isShowBaoxian = ref(false)
	
	const initPage = () => {
		isiPhone.value = uni.getStorageSync('isiPhone');
		statusBar.value = uni.getStorageSync('statusBar');
		customBar.value = uni.getStorageSync('customBar');
		if (!statusBar.value) {
			getDeviceInfoBase((v1, v2) => {
				statusBar.value = v1;
				customBar.value = v2;
			});
		}

		getlocationBase((res) => {
			longitude.value = res.longitude
			latitude.value = res.latitude
		})
	};

	const keyWord = ref('')

	const search = () => {

		uni.setStorageSync('keyWord', keyWord.value)

		uni.switchTab({
			url: '/pages/main/yanche'
		})
	}

	const cityArray = ref(['江苏省', '无锡市'])
	const city = ref('无锡市')
	const ssqRef = ref(null)
	const onShowReg = () => {
		ssqRef.value.open()
	}

	const changessq = (e) => {
		cityArray.value = [e[0], e[1]]
		city.value = e[1]

		getMDList()
	}


	const jumpAll = () => {
		uni.navigateTo({
			url: '/pages/charPages/charPages/list'
		})
	}
	const jumpBz = () => {
		uni.navigateTo({
			url: '/pages/charPages/charPages/shoufen'
		})
	}

	const jumpMD = () => {
		uni.switchTab({
			url: '/pages/main/yanche'
		})
	}

	const list = ref([])

	const charInfo = ref({

	})

	const getMDList = async () => {
		const res = await $post("/index/get_index", {
			area: city.value
		})

		list.value = res.s_list

		if (res.c_list) {
			charInfo.value = res.c_list
		}
	};

	const getImage = (images) => {
		if (!images || images.length == 0) return ''
		if (typeof images == "string") {
			return images.split(',')[0]
		}

		return images[0]
	}

	const onDaohang = (item) => {
		// 打开导航

		// name: item.city,
		// address: item.address,
		// scale: 18
		uni.openLocation({
			latitude: Number(item.latitude),
			longitude: Number(item.longitude),
			name: item.name,
			address: item.address
		})
	}

	const onPhone = (item) => {
		// 拨打电话
		uni.makePhoneCall({
			phoneNumber: item.tel
		})
	}

	const getDate = (time) => {
		if (time) {
			time = time.replace(/-/g, '/')
			let time1 = new Date(time)
			return timeFormat(time1, 'yyyy年mm月dd日')
		} else {
			return ''
		}
	}

	const onPreviewImage = (images) => {
		const imgs = images.split(',')
		// 图片预览
		uni.previewImage({
			urls: imgs,
			current: 0
		})
	}

	const jumpDetail = (item) => {
		uni.navigateTo({
			url: '/pages/mendian/mendian/detail?id=' + item.id
		})
	}

	Vue.onShow(() => {
		initPage();

		getMDList();

		const envVersion = uni.getStorageSync('envVersion')

		if (envVersion == 'release') {
			isShowBaoxian.value = true
		} else {
			isShowBaoxian.value = false
			uni.hideTabBar({
				index: 1
			})
		}

	});
	Vue.onLoad(() => {});
</script>
<style scoped lang="scss">
	.bg-1 {
		width: 100%;
		height: 556rpx;
		background: linear-gradient(180deg, #DBF3F3 0%, rgba(255, 255, 255, 0) 100%);
	}

	.con {
		.address {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #292929;
			line-height: 40rpx;
		}


		.input-box-base {
			padding: 14rpx 24rpx;
		}

		.box1 {
			padding: 0 24rpx;
		}

		.box2 {
			margin-top: 38rpx;
			padding: 0 24rpx;

			.more {
				font-family: OPPOSans, OPPOSans;
				font-weight: 400;
				font-size: 24rpx;
				color: #7D7D7D;
				line-height: 40rpx;

			}
		}

		.list {
			padding-top: 2rpx;

			.item {
				width: 702rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(0, 0, 0, 0.09);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: 28rpx auto 0;
				padding-top: 38rpx;

				.item-top {
					padding: 0 24rpx;

					.image {
						width: 194rpx;
						height: 158rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						overflow: hidden;
					}
				}

				.item-info {
					padding-left: 26rpx;

					.title {}

					.name {
						font-family: OPPOSans, OPPOSans;
						font-weight: bold;
						font-size: 34rpx;
						color: #000000;
						line-height: 44rpx;
						max-width: 370rpx;
					}

					text {
						display: block;
						height: 36rpx;
						margin-left: 4rpx;
						background: #40CAA6;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: OPPOSans, OPPOSans;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 36rpx;

						padding: 0 6rpx;
					}

					.info-1 {
						.text {
							font-family: OPPOSans, OPPOSans;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							width: 408rpx;
							margin-left: 4rpx;
						}
					}
				}

				.item-bottom {
					margin-top: 34rpx;
					height: 68rpx;
					background: #E5F0F0;

					.bott-box {
						font-family: OPPOSans, OPPOSans;
						font-weight: 400;
						font-size: 28rpx;
						color: #348B8A;
						position: relative;

						&.br {
							&::after {
								display: block;
								content: '';
								width: 0rpx;
								height: 37rpx;
								border-radius: 0rpx 0rpx 0rpx 0rpx;
								border: 1rpx solid #348B8A;
								opacity: 0.3;
								position: absolute;
								right: 0;
								top: 50%;
								transform: translateY(-50%);
							}

						}
					}
				}
			}
		}
	}

	.che-leix {
		height: 80rpx;
		max-width: 400rpx;
	}
</style>